<route lang="json5" type="page">
{
  type: 'page',
  needLogin: true,
  style: {
    navigationBarTitleText: '事件统计',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <image class="bg" src="/static/icon/bg.png"></image>
  <!-- 导航栏 -->
  <wd-navbar title="事件统计" custom-class="custom-navbar"></wd-navbar>

  <view class="card mx-4 pa-4">
    <view class="card-title text-sm font-semibold">数据概览</view>
    <view class="card-grid mt-2">
      <view class="card-col mt-2" v-for="(item, index) in dataList" :key="index">
        <view
          class="text-2xl font-semibold"
          :class="[index === 0 ? 'color-blue' : '', index === 3 ? 'color-red' : '']"
        >
          {{ item.value }}
        </view>
        <view class="text-xs">{{ item.title }}</view>
      </view>
    </view>
  </view>
  <view class="card card-chart my-2 mx-4 pa-4">
    <qiun-data-charts type="ring" :chartData="ringData" :opts="ringOptions" canvasId="ringChart" />
  </view>
  <view class="card card-chart my-2 mx-4 pa-4">
    <qiun-data-charts type="pie" :chartData="pieData" :opts="pieOptions" canvasId="pieChart" />
  </view>
</template>

<script lang="ts" setup>
const ringOptions = ref({
  title: {
    name: '',
  },
  subtitle: {
    name: '',
  },
  color: ['#F7A23B', '#F75D5F', '#0FCA7A', '#1C76FD', '#00C7F2'],
  legend: {
    position: 'bottom', // 强制图例在底部
    align: 'center', // 居中对齐
    fontSize: 12,
    itemWidth: 10, // 图例方块宽度
    itemHeight: 10, // 图例方块高度
  },
  extra: {
    ring: {
      ringWidth: 30,
      border: false,
    },
  },
})
const pieOptions = ref({
  color: ['#0FCA7A', '#F7A23B', '#1C76FD'],
  padding: [5, 5, 5, 5],
  extra: {
    pie: {
      border: false,
    },
  },
})
const dataList = [
  {
    title: '事件总量',
    value: '145',
  },
  {
    title: '河道保洁',
    value: '0',
  },
  {
    title: '转办事件',
    value: '0',
  },
  {
    title: '突发事件',
    value: '0',
  },
  {
    title: '设备维护',
    value: '0',
  },
  {
    title: '水质养护',
    value: '0',
  },
  {
    title: '岸线养护',
    value: '0',
  },
  {
    title: 'xxxx',
    value: '0',
  },
]
// 数据
const ringData = ref({
  series: [
    {
      data: [
        { name: '岸线养护', value: 3, labelText: '岸线养护 3' },
        { name: '突发事件', value: 2, labelText: '突发事件 2' },
        { name: '水质养护', value: 5, labelText: '水质养护 5' },
        { name: '河道保洁', value: 12, labelText: '河道保洁 12' },
        { name: '设备维护', value: 1, labelText: '设备维护 1' },
      ],
    },
  ],
})
const pieData = ref({
  series: [
    {
      data: [
        { name: '已完成', value: 36, labelText: '已完成 36' },
        { name: '待审核', value: 5, labelText: '待审核 5' },
        { name: '进行中', value: 10, labelText: '进行中 10' },
      ],
    },
  ],
})
</script>

<style lang="scss">
page {
  padding: 88rpx 0 20rpx;
  /* #ifdef H5 */
  min-height: calc(100vh - 108rpx);
  /* #endif */
}
.bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}
$navbar-height:88rpx;
$primary-color: #2953ff;
$warning-color: #ff910b;
$error-color: #f75d5f;
.color-blue {
  color: $primary-color;
}
.color-red {
  color: $error-color;
}
:deep(.custom-navbar.wd-navbar) {
  background: transparent;
  height: $navbar-height !important;
  line-height: $navbar-height;
  &::after {
    height: 0 !important;
  }
  .wd-navbar__title {
    color: #fff;
    font-size: 32rpx;
    font-weight: bold;
  }
}
.card {
  background: #fff;
  border-radius: 24rpx;
  .card-title {
    position: relative;
    width: fit-content;
    &::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      background: $primary-color;
      opacity: 0.2;
      height: 8rpx;
    }
  }
  .card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4列 */
    grid-template-rows: auto auto; /* 2行 */
    gap: 0;
    text-align: center;
  }
  .card-col {
    position: relative;
    &::after {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1rpx;
      height: 24rpx;
      background: #a7a7a7;
      opacity: 0.5;
    }
    &:nth-of-type(4n){
      &::after{
        width: 0;
        height: 0;
      }
    }
  }
}
.card-chart {
  height: 500rpx; /* 必须指定高度 */
  position: relative; /* 推荐加上 */
}
</style>
